<template lang="html">
  <div class="friend-ranking">
    <div class="ranking" v-for="(item,index) in CousrseData" :key='index'>
      <div class="ranking-id">{{ item.id }}</div>
      <div class="ranking-img"><img :src="item.icon" /></div>
      <div class="ranking-name">{{ item.username }}</div>
      <div class="ranking-distance">{{ item.distance }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      CousrseData:[]
    }
  },
  mounted () {
    this.$axios.get(this.HOST+'http://localhost:3000/burning/rank')
    .then(res => {
      this.CousrseData = res.data.walk
    })
    .catch(error => {
      console.log(error)
    })
  }
}
</script>

<style lang="less">
.friend-ranking{
  margin-top: 8px;
  .ranking{
    width: 100%;
    height: 70px;
    .ranking-id{
      font-size: 20px;
      float: left;
      margin:15px 8px;
    }
    .ranking-img{
      float: left;
      width: 45px;
      height: 45px;
      img{
        width: 100%;
        height: 100%
      }
    }
    .ranking-name{
      float: left;
      font-size: 20px;
      margin:15px 20px;
    }
    .ranking-distance{
      float: right;
      font-size: 20px;
      margin:15px 15px;
    }
  }
}
</style>
